<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>账号安全</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .inner_header .right {
            font-size: 1.4rem;
            color: #6f6f6f;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem 0 1.3rem;
            margin-top: 1.05rem;
        }

        .content .ash {
            background-color: #f2f2f2;
            width: 100%;
            font-size: 1.3rem;
            color: #999;
            margin-top: 1.25rem;
            letter-spacing: 0.03rem;
            height: 1.3rem;
            line-height: 1.3rem;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 4.6rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.6rem;
        }

        .content_li img {
            float: right;
            margin: 1.5rem 1.3rem 0 0;
            width: 0.7rem;
            height: 1.4rem;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #333;
            /* placeholder字体大小 */
            font-size: 1.5rem;
            /* placeholder字间距  */
            letter-spacing: 0rem;
        }
        /* 弹出框 */

        .content .todal {
            width: 72%;
            height: 21.5rem;
            margin: 0 auto;
            margin-top: 16.75rem;
            border-radius: 1rem;
            background-color: #fff;
        }

        .content .todal .head {
            height: 4.8rem;
            line-height: 4.8rem;
            text-align: center;
            color: #000;
            font-size: 1.8rem;
            border-bottom: 0.05rem solid #e6e6e6;
        }

        .content .todal .second {
            height: 3.85rem;
            line-height: 3.85rem;
            text-align: center;
            color: #666;
            font-size: 1.3rem;
            margin-top: 0.65rem;
        }

        .content .todal .code {
            width: 23.75rem;
            height: 5.7rem;
            display: flex;
            margin: 0 auto;
        }

        .content .todal .code .left {
            display: block;
            margin-right: 0.35rem;
            width: 11.7rem;
            height: 5.7rem;
            line-height: 5.7rem;
            text-align: center;
            color: #666;
            font-size: 1.3rem;
            border: 0.05rem solid #e6e6e6;
        }

        .content .todal .code .right {
            width: 11.7rem;
            height: 5.7rem;
            line-height: 5.7rem;
            text-align: center;
            color: #999;
            font-size: 1.3rem;
            border: 0.05rem solid #e6e6e6;
        }

        .content .todal .footer {
            height: 4.4rem;
            line-height: 4.4rem;
            text-align: center;
            display: flex;
            color: #666;
            font-size: 1.6rem;
            border-top: 0.05rem solid #e6e6e6;
            box-sizing: border-box;
            margin-top: 2rem;
        }

        .content .todal .footer div {
            flex: 1;
        }

        .content .todal .footer .left {
            border-right: 0.05rem solid #e6e6e6;
        }

        .content .todal .code .hidden {
            display: block;
            margin-right: 0.35rem;
            width: 11.7rem;
            height: 5.7rem;
            line-height: 5.7rem;
            text-align: center;
            color: #ed6a20;
            font-size: 1.3rem;
            border: 0.05rem solid #e6e6e6;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../image/back.png">
            </a>
            <div class="aui-title">账号安全</div>
            <a class="aui-pull-right share_nav_right right">
               取消
          </a>
        </header>
        <div class="content">
            <div class="content_list ash">
                您正在重置支付密码，请用以下验证方式完成身份验证
            </div>
            <div class="content_list">
                <div class="content_li" @click="clickphone">
                    验证绑定手机与身份信息
                    <img src="../../../image/capital/icon4.png" alt="" >
                </div>
            </div>
            <div class="content_list ash">
                如果无法自助修改，请申请客服协助
            </div>
            <div class="todal" v-if="create">
                <div class="head">验证手机号</div>
                <div class="second">输入手机尾号6709接收到的短信验证码</div>
                <div class="code">
                    <input type="tel" placeholder="短信验证码" v-model="refcode" ref="refcode" maxlength="6" class="left">
                    <div class="right" v-if="heiden1">{{number}}秒后重发</div>
                    <div class="hidden" v-if="heiden2" @click="getcode" ref="refright">发送验证码</div>
                </div>
                <div class="footer">
                    <div class="left" @click="cancel">取消</div>
                    <div class="right" @click="confirm('set_pay_password','./pay_password.html')" ref="refconfirm">确认</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        var user_info =  $api.getStorage('user_info')
        var token =  $api.getStorage('token')
        var phone_w = user_info.telephone.substr(user_info.telephone.length-4)
        console.log(phone_w)
        new Vue({
            el: "#app",
            data: {
                create: false,
                number: 106,
                heiden1: true,
                heiden2: false,
                token:token,
                user_info:user_info,
                refcode:"", //手机验证码
                phone_w:phone_w
            },
            methods: {
                clickphone: function() {
                    this.create = true;
                    var that = this
                    console.log(JSON.stringify(this.user_info))
                    var data={
                        telephone:user_info.telephone,
                        type:3   //修改支付密码
                    }
                    Axios.post(window.Url.getMessageCode,data).then(function(res){
                        console.log(JSON.stringify(res))
                        if(res.status==1){
                            var clock = window.setInterval(() => {
                                if (this.create == false) {
                                    window.clearInterval(clock);
                                    this.number = '60'
                                } else {
                                    this.number--
                                        // console.log(this.number)
                                        if (this.number < 0) { //当倒计时小于0时清除定时器
                                            window.clearInterval(clock)
                                            this.number = '60'
                                            this.heiden1 = false
                                            this.heiden2 = true
                                            this.$refs.refconfirm.style.color = "#ed6a20"
                                        }
                                }    
                            }, 1000)
                        }
                    })

                },
                getcode: function() {
                    this.create = true;
                    var clock = window.setInterval(() => {
                        if (this.create == false) {
                            window.clearInterval(clock);
                            this.number = '60'
                        } else {
                            this.number--
                                // console.log(this.number)
                                if (this.number < 0) { //当倒计时小于0时清除定时器
                                    window.clearInterval(clock)
                                    this.number = '60'
                                    this.heiden1 = false
                                    this.heiden2 = true
                                }
                        }    
                    }, 1000)
                },
                // 点击取消，弹出框消失
                cancel: function() {
                    this.create = false
                },
                // 点击确定，弹出框消失
                confirm: function(name, url) {
                    var that = this
                    var data= {
                        token:$api.getStorage("token"),
                        type:1,
                        code:this.refcode
                    }
                    Axios.post(window.Url.setpaypwd,data).then(function(res){
                        // console.log(res)
                        if(res.status==1){
                            api.openWin({
                                name: name,
                                url: url,
                                pageParam: {
                                    type: api.pageParam.type
                                }
                            });
                        }else {
                            api.toast({
                                msg: res.info,
                                duration: 1000,
                                location: 'center'
                            });

                        }
                    })
                    this.create = false

                },
            },
        })
    };


    function goBack() {
        api.closeWin({

        });
    }
</script>

</html>
